<template>
  <section>
    <el-tabs v-model="tabPane">
      <el-tab-pane label="入库类型" name="stockIn">
        <stock-in :typeList="typeList" v-if="tabPane === 'stockIn' && typeList !==null"
                  v-on:addType="addTypeBtn" v-on:confirm="confirmBtn" v-on:del="delBtn"/>
      </el-tab-pane>
      <el-tab-pane label="出库类型" name="stockOut">
        <stock-in :typeList="typeList" v-if="tabPane === 'stockOut' && typeList !==null"
                  v-on:addType="addTypeBtn" v-on:confirm="confirmBtn" v-on:del="delBtn"/>
      </el-tab-pane>
      <el-tab-pane label="仓库类型" name="stockManagement">
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import stockIn from './stockIn'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "index",
    components:{stockIn},
    data(){
      return{
        tabPane:'stockIn',
        typeList:null
      }
    },
    watch:{
      tabPane(nv,ov){
        if(nv === 'stockIn'){
          this.getStockInTypes()
        }else if(nv === 'stockOut'){
          this.getStockOutTypes()
        }
      }
    },
    created(){
      this.getStockInTypes()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getStockInTypes(){
        this.typeList=null
        this.fetch({name:"getStockInTypes"})
          .then(res=>{
            console.log(res)
            this.typeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockOutTypes(){
        this.typeList=null
        this.fetch({name:"getStockOutTypes"})
          .then(res=>{
            this.typeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addTypeBtn(){
        let tmp = {name:'',code:'',edit:true}
        this.typeList.push(tmp)
      },
      confirmBtn(scope){
        console.log('入库还是出库------',this.tabPane)
        if(scope.row.id){
          //更新
          console.log('更新-----',scope)
          this.saveEvent(scope.row)
        }else{
          //新建
          console.log('新建-----',scope)
          this.addEvent(scope.row)
        }
      },
      delBtn(e){
        if(this.tabPane === 'stockIn'){
          this.deleteStockInType(e)
        }else if(this.tabPane === 'stockOut'){
          this.deleteStockOutType(e)
        }
      },
      saveEvent(data){
        if(this.tabPane === 'stockIn'){
          //更新入库
          this.updateStockInType(data)
        }else if(this.tabPane === 'stockOut'){
          //更新出库
          this.updateStockOutType(data)
        }
      },
      addEvent(data){
        if(this.tabPane === 'stockIn'){
          this.createStockInType(data)
        }else if(this.tabPane === 'stockOut'){
          this.createStockOutType(data)
        }
      },
      createStockInType(data){
        this.fetch({name:"createStockInType",data})
          .then(res=>{
            this.$message({type:'success',message:'新建入库类型成功！'})
            this.getStockInTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createStockOutType(data){
        this.fetch({name:"createStockOutType",data})
          .then(res=>{
            this.$message({type:'success',message:'新建出库类型成功！'})
            this.getStockOutTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateStockInType(data){
        this.fetch({name:"updateStockInType",data})
          .then(res=>{
            this.$message({type:'success',message:'更新入库类型成功！'})
            this.getStockInTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateStockOutType(data){
        this.fetch({name:"updateStockOutType",data})
          .then(res=>{
            this.$message({type:'success',message:'更新出库类型成功！'})
            this.getStockOutTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      deleteStockInType(id){
        this.fetch({name:"deleteStockInType",data:{id}})
          .then(res=>{
            this.$message({type:'success',message:'删除成功！'})
            this.getStockInTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      deleteStockOutType(id){
        this.fetch({name:"deleteStockOutType",data:{id}})
          .then(res=>{
            this.$message({type:'success',message:'删除成功！'})
            this.getStockOutTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
